<template>
    <el-dialog v-model="drawer" title="选择执行人" width="400px" :append-to-body="true" @close="close" destroy-on-close center>
        <el-select v-model="userInfo.userId" class="m-2" placeholder="请选择执行人" @change="selectUserInfo">
            <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
            />
        </el-select>
    </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElCarouselItem } from 'element-plus'

import api from '/@/api/commonApi'

export default {
    name: "ExecutorList",
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        type: {
            type: Number,
            default: 0
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const uploadBanner = ref()
        const { dialogDrawer, type } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        watch(() => type.value,
            val => {
                reset()
                getExecutorList(val)
            }
        )
        const state = reactive({
            userList: [],
            userInfo: {
                userId: '',
                userName: '',
                url: '',
                type: type.value
            }
        })
        // 关闭
        const close = () => {
            reset()
            context.emit('update:dialogDrawer', false)
        }
        // 选择执行用户
        const selectUserInfo = (val) => {
            console.log(val);
            let userInfo = state.userList.find(item => {
                if (item.userId == val) {
                    return item
                }
            })
            context.emit('onSubmit', {userId: userInfo.userId, userName: userInfo.userName})
            close()
        }
        // 获取执行人列表
        const getExecutorList = (type) => {
            if (type == 1) {
                api.moneyExecutorList({code: 'payable'}).then(res => {
                    state.userList = res.data
                })
            }else {
                api.libExecutorList({code: 'afterSaleList'}).then(res => {
                    state.userList = res.data
                })
            }
        }
        // 重置选择人
        const reset = () => {
            state.userInfo = {
                userId: '',
                userName: '',
                url: '',
                type: type.value
            }
        }

        onMounted(() => {
            reset()
            getExecutorList(type.value)
        })
        return {
            ...toRefs(state),
            onMounted,
            drawer,
            close,
            reset,
            selectUserInfo,
            getExecutorList,
        }
    }

}


</script>

<style lang="scss" scoped>

</style>